<template>
    <div>
        <el-card class="box-card">
            <el-form :model="form" label-width="120px">
                <el-form-item label="医生账号">
                    <el-input v-model="{ ...form }.account" disabled v-once />
                </el-form-item>
                <el-form-item label="医生权限">
                    <el-select v-model="form.sort" placeholder="账号权限" disabled>
                        <el-option label="护士" value="医生" />
                        <el-option label="医生" value="护士" />
                    </el-select>
                </el-form-item>

                <el-form-item label="新密码">
                    <el-input v-model="form.newpwd" />
                </el-form-item>

                <el-form-item label="旧密码">
                    <el-input v-model="form.oldpwd" />
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="form.idcard" />
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.phone" />
                </el-form-item>
                <el-form-item label="科室更改">
                    <el-select v-model="form.department" placeholder="请选择科室">
                        <el-option v-for="i in store.state.jjy.departmentList" :key="i.id" :label="i.name" :value="i.name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="更改图片">
                    <el-upload class="avatar-uploader" :action="action" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确定修改</el-button>
                    <el-button @click="brack">返回上一级</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import { useStore } from 'vuex';

import { useRouter} from 'vue-router'
const store = useStore()
const router = useRouter()

const action = `${import.meta.env.VITE_BASE_URL}/drugs/uploaddrugs`
// do not use same name with ref
const form = reactive({
    // 名字
    name: '哇哈哈',
    //分类
    id: 2,
    // 手机号
    phone: '11111111',
    //性别
    sex: '男',
    //新密码
    newpwd: '',
    //旧密码
    oldpwd: '',
    // 身份证号
    idcard: '2520*******250',
    //头像
    head: '',
    //科室
    department: '',
    //权限
    sort: '',
    account: '************'
})


const imageUrl = ref('')
const nurseData = computed(() => {
    console.log(store.state.jjy.nurseData);

    return store.state.jjy.nurseData
})


//上传图片回显
function handleAvatarSuccess(val) {
    form.head = val.drugs
    if (val.code == 0) {
        imageUrl.value = val.drugs_url
    }
}
onMounted(() => {
    console.log(store.state.jjy.nurseData);
    if (store.state.jjy.nurseData.id) {
        for (let key in store.state.jjy.nurseData) {
            form[key] = store.state.jjy.nurseData[key]
        }
        imageUrl.value = store.state.jjy.nurseData.head.toString()
    }
    store.dispatch('jjy/A_drugsDrugstype')
})
//上传失败回显
function beforeAvatarUpload(val) {
    console.log(val);
}
//确定修改
const onSubmit = () => {
    console.log(form.head.indexOf('/'));
    if (form.head.indexOf('/') != -1) {
        //删除图片
        delete form.head
    }
    form.id = +form.id + 0
    store.dispatch('jjy/A_rosteringNurse', form)
    // router.push('/warehouse')
    router.push('/nurse')
}
function brack(){
    router.push('/nurse')
}
</script>

<style scoped lang="scss">
.avatar {
    width: 50px;
    height: 70px;
    border-radius: 10px;
}

.el-input {
    width: 800px;
}
</style>